import React, { Component } from 'react'
import style from './UserPage.module.less'
import Usermiddleware from './components/index'
import classNames from 'classnames';
import {withRouter} from "react-router-dom";
import { Layout, Tabs } from 'antd';
import { ContainerOutlined,  DatabaseOutlined } from '@ant-design/icons';
import {connect} from "react-redux";
import CreateCenter from "@pages/UserPage/components/createCenter";
import study1 from '../../assets/image/天气之子 天空 手 4k动漫壁纸3840x2160_彼岸图网.jpg'
const { Content } = Layout;
const { Sider } = Layout;
 class UserPage extends Component {
    state = {
        set: '用户中心',
        active: 1,
        data: [
            {
                id: 1,
                icon: ContainerOutlined,
                // <ContainerOutlined />
                name: '发布乐谱'
            },
            {
                id: 2,
                icon: DatabaseOutlined,
                // <DatabaseOutlined />
                name: '历史发布'
            },
        ],
        historyName: '发布乐谱'
    }
     ClickHiddlen = (event) => {
         console.log(event);
         // const text = event.target.innerText
         if (event === '发布乐谱') return this.setState({ historyName: '发布乐谱' })
         if (event === '历史发布') return this.setState({ historyName: '历史发布' })
     }
    componentDidMount() {

    }

     onClickSet = (event) => {
        if (event.target.innerText === '用户中心') {
            return this.setState({
                set: '用户中心',
            })
        }
        if (event.target.innerText === '历史记录') {
            return this.setState({
                set: '历史记录',
            })
        }
        if (event.target.innerText === '我的收藏') {
            return this.setState({
                set: '我的收藏',
            })
        }
        if (event.target.innerText === '评论列表') {
            return this.setState({
                set: '评论列表',
            })
        }

    }
    render() {
        const user = this.props.user
        // console.log(user)
        return (
            <>
                <Layout className='center'>
                    <Sider
                        width={200}
                        style={{
                            background: 'white',
                        }}
                        className={style.user_list}
                    >
                        <div className={style.user_img} >
                            <div className={style.photo} style={{backgroundImage:`url(${process.env.REACT_APP_BASE_URL}${user.userImg})`}}>
                                <p>{user.username}</p>
                            </div>

                        </div>
                        <div className={style.user_set}>
                            <p onClick={(event) => { this.onClickSet(event) }} className={classNames({ 'actives': this.state.set === '用户中心' })}>用户中心</p>
                            <p onClick={(event) => { this.onClickSet(event) }} className={classNames({ 'actives': this.state.set === '历史记录' })}>历史记录</p>
                            <p onClick={(event) => { this.onClickSet(event) }} className={classNames({ 'actives': this.state.set === '我的收藏' })}>我的收藏</p>
                            <p onClick={(event) => { this.onClickSet(event) }} className={classNames({ 'actives': this.state.set === '评论列表' })} >评论列表</p>
                        </div>
                    </Sider>
                    <Usermiddleware set={this.state.set} />

                </Layout>
                <div className='center'>
                    <div className={style.create} >
                        <div className={style.center}>
                            <Content
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 280,
                                    background: 'white',
                                }}
                            >
                                <Tabs

                                    defaultActiveKey="1"
                                    // onChange={this.ClickHiddlen('1')}
                                    items={this.state.data.map((item) => {
                                        const id = String(item.id);
                                        return {
                                            label: (
                                                <>
                                        <span onClick={() => this.ClickHiddlen(item.name)} >
                                            <item.icon />
                                            {item.name}
                                        </span>
                                                </>
                                            ),
                                            key: id,
                                            children: <CreateCenter historyName={this.state.historyName}/>
                                        };

                                    })}
                                    // onClick={(event) => this.ClickHiddlen(event)}
                                />
                            </Content>
                        </div>
                        <div className={style.study}>
                            <div className = {style.title}>
                                <p>我的课程</p>
                            </div>
                            <div className={style.create}  >
                                <h1>和弦转换</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

const mapStateToProps = (state) =>({
    user:state.userReducer.user
})
export default connect(mapStateToProps)(withRouter(UserPage))
